Using ActionScript 2.0 Components |
|
|
|
| Customizing Components > Using styles to customize component color and text > Setting inheriting styles on a container | |||
An inherited style is a style that inherits its value from parent components in the document's MovieClip hierarchy. If a text or color style is not set at an instance, custom, or class level, Flash searches the MovieClip hierarchy for the style value. Thus, if you set styles on a container component, the contained components inherit these style settings.
The following styles are inheriting styles:
fontFamily fontSize fontStyle fontWeight textAlign textIndent themeColor is an inheriting style, but alternatingRowColors is not)The Style Manager tells Flash whether a style inherits its value. Additional styles can also be added at runtime as inheriting styles. For more information, see StyleManager class in the ActionScript 2.0 Components Language Reference.
|
NOTE |
One major difference between the implementation of styles for Flash components, and cascading style sheets for HTML pages, is that the CSS |
Inherited styles take priority over global styles. For a list of style precedence, see Using global, custom, and class styles in the same document.
The following example demonstrates how inheriting styles can be used with an Accordion component, which is available with Flash.
To create an Accordion component with styles that are inherited by the components in the individual Accordion panes:By dragging the components to the library, you make them available to your script at runtime.
var section1 = accordion.createChild(mx.core.View, "section1", {label: "First Section"});
var section2 = accordion.createChild(mx.core.View, "section2", {label: "Second Section"});
var input1 = section1.createChild(mx.controls.TextInput, "input1");
var button1 = section1.createChild(mx.controls.Button, "button1");
input1.text = "Text Input";
button1.label = "Button";
button1.move(0, input1.height + 10);
var input2 = section2.createChild(mx.controls.TextInput, "input2");
var button2 = section2.createChild(mx.controls.Button, "button2");
input2.text = "Text Input";
button2.label = "Button";
button2.move(0, input2.height + 10);
The above code adds two children to the Accordion component and loads each with a TextInput and Button control, which this example uses to demonstrate style inheritance.
accordion.setStyle("fontStyle", "italic");
Notice that the fontStyle setting on the Accordion component affects not only the Accordion text itself but also the text associated with the TextInput and Button components inside the Accordion component.
|
|
|
|